import React, {useEffect, useState} from 'react';
import {Card, Divider, Flex, List, Space, Table, Tag} from "antd";
import {Link, useLocation} from "react-router-dom";
import {GatewayRoute, GatewayRouteFactory} from "type/entity/GatewayRoute";
import LogFactory from "log/LogFactory";
import RequestHandler from "http/RequestHandler";
import TextContext from "./TextContext";
import TableToolbar from "../../../common/table/TableToolbar";

const log = LogFactory.getLogger("RouterFactoryComponent");
const RouterFactoryComponent = () => {
    const router = useLocation().state as GatewayRoute;
    log.debug("router", router);

    const [data, setData ] = useState<GatewayRouteFactory[]>([]);

    useEffect(() => {
        RequestHandler.get<GatewayRouteFactory[]>("/manager/admin/route/factory/list/" + router.id)
            .then(res => {
               log.debug("路由工厂列表", res.data);
               if (res.success){
                   setData(res.data);
               }
            });
    }, []);

    return (
        <Card title={"路由工厂信息"} extra={<Link to={".."}>路由列表</Link>}>
         <Flex vertical={true}>
             <TextContext title={"路由编号"} info={router.id}/>
             <TextContext title={"路由ID"} info={router.routeId}/>
             <TextContext title={"路由元数据"} info={router.metadata}/>
         </Flex>
            <Divider/>
            <TableToolbar title={"工厂数量"} info={data.length} skipState={router}/>
            <List
                itemLayout={"horizontal"}
                dataSource={data}
                renderItem={item => {
                    const {args} = item;
                    const cont = JSON.parse(args);
                    const a = Object.keys(cont).map(e => {
                        return <div style={{marginBottom: "6px"}} key={e}>
                            <span style={{
                                backgroundColor: "#175560",
                                color: "white",
                                marginRight: "10px",
                                padding: "0 10px",
                                borderRadius: "6px"
                            }}>{e}</span>
                            <span>
                                {cont[e]}
                           </span>
                        </div>;
                    });
                    return (
                        <List.Item
                            actions={[
                                <Link to={"update"} state={{
                                    router: router,
                                    factory: item
                                }}>编辑</Link>
                            ]}
                        >
                            <List.Item.Meta
                                avatar={<Tag
                                    color={item.type === "predicate" ? "#176a48" : "#611973"}>{item.type === "predicate" ? "路由工厂" : "过滤器工厂"}</Tag>}
                                title={item.name}
                                description={a}
                            />
                        <Space>
                            {item.metadata}
                        </Space>
                        </List.Item>
                    );
                }}
            >
            </List>
        </Card>
    );
};

export default RouterFactoryComponent;